<template>
	<view>
		<view class="bw-swiper-body">
			<view class="bw-flex-u">
				<view class="left-view">
					<text class="iconfont icon-fangdajing1 search"></text>
					<input type="text" placeholder="搜你想要" disabled="false" @click="linkUrl" />
				</view>
				<view class="right-view">
					<text> 标 题 </text>
				</view>
			</view>
			<view class="bw-swiper">
				<swipers :position="position" :Height="300" @Change="variation" :indicatorDots="false"></swipers>
			</view>
		</view>
		<view class="bw-introduce">
			<view>
				<image src="../../../static/Hometwo/xin.png"></image>
				<text>成品批发</text>
			</view>
			<view>
				<image src="../../../static/Hometwo/hua.png"></image>
				<text>品质保证</text>
			</view>
			<view>
				<image src="../../../static/Hometwo/che.png"></image>
				<text>包邮到家</text>
			</view>
		</view>

		<view class="bw-trumpet">
			<view>
				<!-- 小喇叭 -->
				<bwtrumpet :lists="lists" :vertical="true" :interval="2000" :duration="400"></bwtrumpet>
			</view>
		</view>

		<view class="bw-skip">
			<text class="left">心愿单</text>
			<view>
				<text class="right">立即许愿</text>
				<text class="iconfont icon-qianjinxiayige more"></text>
			</view>
		</view>


		<view class="bw-area">
			<view class="bw-left-view">
				<text class="bw-title">特价秒杀区</text>
				<text class="bw-color">精选推荐 随时折扣</text>
				<view class="bw-seckill">
					<view v-for="(a_item,a_index) in list" :key="a_index">
						<image :src="a_item.img"></image>
						<view class="bw-fize">￥<text>{{a_item.price}}</text></view>
					</view>
				</view>
			</view>
			<view class="bw-right-view">
				<view class="bw-flex-u">
					<text class="bw-title">采购榜</text>
					<text class="bw-manifest">全场热卖</text>
				</view>
				<text class="bw-color">热卖产品 都在这里</text>
				<view class="bw-seckill">
					<view v-for="(a_item,a_index) in shop" :key="a_index">
						<image :src="a_item.img"></image>
						<view class="bw-fize">{{a_item.name}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bw-text-title">
			<view class="bw-flex-u">
				<text class="bw-title">免费中心</text>
				<text style="padding-left:20rpx;">分享好物,免费领</text>
			</view>
			<text class="bw-check">查看全部</text>
		</view>

		<view class="bw-scroll-body">
			<scroll-view scroll-x="true" @scroll="scroll" scroll-left="5" class="scroll-view_x">
				<block v-for="(b_item,b_index) in 3">
					<view style="display: inline-block;width:67%;">
						<view class="bw-scroll_view">
							<image src="../../../static/Mine/5.png"></image>
							<view>
								<text class="bw-title">少女ins风花瓶</text>
								<view class="bw-background ">已领取<text class="bw-prominent">1.03w件</text></view>
								<view class="bw-affirm">立即领取</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>

		<view class="bw-roll-screen">
			<scroll-view scroll-x="true" scroll-left="5" class="scroll-view_x">
				<block v-for="(c_item,c_index) in nav" :key="c_index">
					<view @click="getIndex(c_index)">
						<text class="bw-title">{{c_item.title}}</text>
						<text :class="{'active':inx == c_index}">{{c_item.name}}</text>
					</view>
				</block>
			</scroll-view>
		</view>

		<block v-for="(d_item,d_index) in 3" :key="d_index">
			<view class="bw-commodity-body">
				<image src="../../../static/Mine/5.png"></image>
				<view class="bw-null">抢光了</view>
				<view style="margin-left:20rpx;">
					<text class="bw-title">520主题告白系列之爱的花语</text>
					<view class="bw-flex-block">
						<view v-for="(e_item,e_index) in 3" :key="e_index" class="bw-specification"
							:style="{'border-right':e_index == 0 || e_index == 1 ? '1px solid rgba(154, 158, 169, 0.38)' : '1px solid #FFFFFF'}">
							<text>19.9元/束</text>
							<text>单价</text>
						</view>
					</view>
					<view class="bw-flex-u">
						<view class="bw-price">￥<text>299</text></view>
						<view class="num-flex">
							<view class="bw-add" @click="add('add')">+</view>
							<view style="font-size:30rpx;">{{num}}</view>
							<view class="bw-add" @click="add('subtract')">-</view>
						</view>
					</view>
				</view>
			</view>
		</block>

		<view class="bw-login">
			<text>登录后可查看商品价格</text>
			<button>马上登录</button>
		</view>

		<loading></loading>
	</view>
</template>

<script>
	import swipers from 'components/bw-swipers/bw-swipers.vue';
	import bwtrumpet from '../../../components/bw-trumpet/bw-trumpet.vue';
	import loading from 'components/bw-loading/bw-loading.vue';
	export default {
		components: {
			swipers,
			bwtrumpet,
			loading
		},
		data() {
			return {
				position: 0, //位置 0=首页,1=商城,2=分类	
				lists: [ //喇叭通告
					'这是一段通告11111',
					'这是一段通告22222',
					'这是一段通告33333',
					'这是一段通告44444'
				],
				list: [{
					img: 'https://img2.baidu.com/it/u=2242269775,1153556320&fm=26&fmt=auto&gp=0.jpg',
					price: 99
				}, {
					img: 'https://img0.baidu.com/it/u=1621244939,3113398346&fm=26&fmt=auto&gp=0.jpg',
					price: 99
				}],
				shop: [{
					img: 'https://img0.baidu.com/it/u=1750774220,303097792&fm=26&fmt=auto&gp=0.jpg',
					name: '鲜花榜'
				}, {
					img: 'https://img2.baidu.com/it/u=1083087892,2926658407&fm=26&fmt=auto&gp=0.jpg',
					name: '周边榜'
				}],
				nav: [{
					title: '全部',
					name: '精选花束'
				}, {
					title: '情人节系列',
					name: '花来表达'
				}, {
					title: '感恩节系列',
					name: '感恩有你'
				}, {
					title: '全部',
					name: '精选花束'
				}],
				inx: 0,
				num: 0
			}
		},
		//上拉事件
		onReachBottom() {
			console.log("上拉触底");
		},
		methods: {
			variation(e) {
				console.log(e);
			},
			scroll(e) {
				console.log(e);
			},
			getIndex(e) {
				this.inx = e;
			},
			linkUrl() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			add(res) {
				if (res == 'add') {
					this.num++;
					console.log("加");
				} else {
					if (this.num > 0) {
						this.num--;
					}
					console.log("减");
				}
			}
		}
	}
</script>


<style>
	page {
		background-color: #f7f8f9;
	}
</style>
<style scoped lang="scss">
	@import "../../../iconfont.scss";

	::-webkit-scrollbar {
		display: none;
	}

	.bw-swiper-body {
		width: 100%;
		height: 420rpx;
		background-color: #e8b3ac;

		.bw-flex-u {
			width: 55%;
			padding-top: 40rpx;
			padding-left: 20rpx;
			padding-bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left-view {
				width: 50%;
				height: 40rpx;
				display: flex;
				padding-top: 20rpx;
				padding-bottom: 18rpx;
				align-items: center;
				background-color: #f3f4f6;
				border-radius: 50rpx;

				.search {
					padding-left: 13rpx;
				}
			}

			.right-view {
				text {
					color: #FFFFFF;
					font-weight: 600;
					font-family: unset;
					font-size: 45rpx;
				}
			}

			input {
				width: 100%;
				font-size: 25rpx;
				padding-left: 10rpx;
				color: #9a9ea9;
			}
		}

		.bw-swiper {
			width: 90%;
			margin: 0px auto;
		}

	}

	.bw-introduce {
		width: 85%;
		margin: 0px auto;
		// border:1px solid red;
		padding-top: 60rpx;
		padding-bottom: 25rpx;
		display: flex;
		justify-content: space-between;

		view {
			display: flex;
			align-items: center;

			text {
				color: #fd1470;
				font-size: 26rpx;
				padding-left: 10rpx;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.bw-trumpet {
		width: 100%;
		height: 60rpx;
		padding-top: 10rpx;
		padding-bottom: 8rpx;
		background-color: #faf0f4;
		display: flex;
		align-items: center;

		.laba {
			color: #fd1470;
			padding-left: 40rpx;
		}

		view {
			width: 100%;
			height: 50rpx;
			font-size: 27rpx;
			margin-left: 15rpx;
			padding-top: 5rpx;
			padding-bottom: 5rpx;
			color: #fd1470;

		}
	}

	.bw-skip {
		width: 90%;
		height: 100rpx;
		margin: 40rpx auto;
		background-image: url(../../../static/Mine/yanhuatuoyuan.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		text {
			color: #FFFFFF;
		}

		.left {
			padding-left: 35rpx;
			font-size: 35rpx;
		}

		.right {
			font-size: 28rpx;
			padding-right: 10rpx;
		}

		.more {
			padding-right: 35rpx;
		}
	}

	.bw-area {
		width: 90%;
		height: 300rpx;
		margin: 0px auto;
		padding-bottom: 20rpx;
		background-color: #FFFFFF;
		display: flex;

		.bw-left-view {
			width: 45%;
			padding: 20rpx;

			.bw-title {
				display: block;
				font-size: 33rpx;
				font-weight: 500;
			}

			.bw-color {
				display: block;
				color: #FF4790;
				font-size: 25rpx;
				padding-top: 10rpx;
			}

			.bw-seckill {
				display: flex;
				justify-content: space-between;
				padding-top: 20rpx;

				.bw-fize {
					font-size: 25rpx;
					color: #fd3f8a;
					font-weight: 600;
				}

				view {
					text-align: center;
				}

				image {
					width: 135rpx;
					height: 135rpx;
					border-radius: 10rpx;
				}

				text {
					font-weight: 600;
					font-size: 35rpx;
					color: #fd3f8a;
					font-family: PingFangSC-Semibold, PingFang SC;
				}
			}
		}

		.bw-right-view {
			width: 45%;
			padding: 20rpx;

			.bw-seckill {
				display: flex;
				justify-content: space-between;
				padding-top: 20rpx;

				.bw-fize {
					font-size: 28rpx;
					color: #fd3f8a;
					font-weight: 600;
				}

				view {
					text-align: center;
				}

				image {
					width: 135rpx;
					height: 135rpx;
					border-radius: 10rpx;
				}
			}

			.bw-flex-u {
				display: flex;

				.bw-manifest {
					height: 30rpx;
					padding: 8rpx;
					padding-left: 10rpx;
					padding-right: 10rpx;
					background: linear-gradient(135deg, #FF78AE 0%, #FF4891 100%);
					border-radius: 14px;
					display: block;
					font-size: 20rpx;
					color: #FFFFFF;
					margin-left: 10rpx;
				}
			}

			.bw-title {
				display: block;
				font-size: 33rpx;
				font-weight: 500;
			}

			.bw-color {
				display: block;
				color: #FF4790;
				font-size: 25rpx;
				padding-top: 10rpx;
			}
		}
	}

	.bw-text-title {
		width: 90%;
		margin: 20rpx auto;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.bw-flex-u {
			display: flex;
			align-items: center;
			color: #9A9EA9;
			font-size: 25rpx;

			.bw-title {
				font-size: 33rpx;
				font-weight: 500;
				color: #000000;
			}
		}

		.bw-check {
			color: #9A9EA9;
			font-size: 25rpx;
		}
	}

	.bw-scroll-body {
		width: 90%;
		height: 230rpx;
		background-color: #FFFFFF;
		margin: 0px auto;

		.scroll-view_x {
			width: 100%;
			height: 230rpx;
			overflow: hidden;
			white-space: nowrap;

			.bw-scroll_view {
				// width: 60%;
				padding: 20rpx;

				display: flex;

				image {
					width: 180rpx;
					height: 180rpx;
				}

				.bw-title {
					font-size: 30rpx;
					font-weight: 500;
					padding-left: 20rpx;
				}

				.bw-background {
					padding-left: 12rpx;
					padding-top: 8rpx;
					padding-bottom: 8rpx;
					padding-right: 10rpx;
					margin-top: 20rpx;
					margin-left: 20rpx;
					background-color: #fff4f5;
					font-size: 20rpx;

					.bw-prominent {
						color: #f15292;
						font-size: 20rpx;
						padding-left: 5rpx;
						margin-left: 10rpx;
					}
				}

				.bw-affirm {
					width: 140rpx;
					padding: 10rpx;
					border-radius: 50rpx;
					font-size: 25rpx;
					text-align: center;
					background-color: #ff5196;
					color: #FFFFFF;
					margin-left: 20rpx;
					margin-top: 20rpx;
				}
			}
		}
	}

	.bw-roll-screen {
		width: 90%;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
		
		.scroll-view_x {
			width: 100%;
			height: 100rpx;
			overflow: hidden;
			white-space: nowrap;	
		}

		view {
			width:auto;
			margin-left:20rpx;
			text-align: center;
			padding-left: 10rpx;
			padding-right: 10rpx;
			padding-bottom: 20rpx;
			display: inline-block;
			text {
				color: #9A9EA9;
				font-size: 20rpx;
			}

			.bw-title {
				color: #171E3A;
				font-size: 30rpx;
				padding-top: 5rpx;
				padding-bottom: 5rpx;
				font-weight: 500;
				display: block;
			}
		}
	}

	.active {
		background-color: #FF4790;
		color: #FFFFFF !important;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		font-size: 20rpx !important;
		border-radius: 50rpx;
	}

	.bw-commodity-body {
		width: 90%;
		background-color: #FFFFFF;
		margin: 20rpx auto;
		padding-bottom: 10rpx;
		display: flex;

		//justify-content:space-between;
		.bw-null {
			position: absolute;
			width: 200rpx;
			height: 190rpx;
			background-color: rgba(0, 0, 0, 0.7);
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
		}

		.bw-title {
			font-weight: 500;
			padding-top: 10rpx;
			padding-left: 25rpx;
			display: block;
			font-size: 30rpx;
		}

		image {
			width: 200rpx;
			height: 190rpx;
		}

		.bw-flex-block {
			display: flex;
			justify-content: space-between;
			font-size: 25rpx;
			padding-top: 15rpx;

			text {
				display: block;
				font-size: 20rpx;
			}
		}

		.bw-specification {
			text-align: center;
			color: #9A9EA9;
			padding-left: 20rpx;
			padding-right: 20rpx;

			text {
				// text-align: left;
			}
		}

		.bw-flex-u {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 8rpx;
			padding-left: 18rpx;
			padding-bottom: 10rpx;

			.num-flex {
				width: 30%;
				display: flex;
				justify-content: space-between;
				// margin-right:30rpx;
				align-items: center;
				margin-top: 10rpx;
			}

			.bw-price {
				font-size: 20rpx;
				font-weight: 500;
				color: #FD1470;

				text {
					font-size: 30rpx;
				}
			}

			.bw-add {
				width: 40rpx;
				height: 40rpx;
				background-color: #FD1470;
				display: flex;
				justify-content: center;
				line-height: 40rpx;
				font-size: 30rpx;
				border-radius: 28rpx;
				color: #FFFFFF;
			}
		}
	}

	.bw-login {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		background-color: rgba(0, 0, 0, 0.8);

		button {
			width: 25%;
			height: 60rpx;
			line-height:60rpx;
			border: none;
			font-size: 25rpx;
			border-radius: 50rpx;
			background-color: #fd1470;
			color: #FFFFFF;
			outline: none;
			margin-right: 30rpx;
		}

		text {
			color: #FFFFFF;
			display: block;
			padding-left: 30rpx;
			font-size: 28rpx;
		}
	}
</style>
